<template>
  <view class="container">
    <!-- 头部 -->
    <view class="head"
      style="background-color: #ffcc00;
      height: 180rpx;
      display: flex;">
      <img
        style="height: 50rpx;
        width: 50rpx;
        padding: 10rpx;
        margin-top: 15%;"  
        src="../../../static/tabbar/返回.png" 
        alt="" 
        @click="handleBack"
      />
      <view style="
        height: fit-content;
        margin-top: 15%;
        margin-left: 30%;
        font-size: 32rpx;"
      >联系客服</view>
    </view>

    <!-- 主内容区域，添加滚动容器 -->
    <scroll-view class="content" scroll-y="true">
      <!-- 成功提示 -->
      <!-- <view  class="success-message">
        <text>您的购买请求已成功发送，请尽快联系客服！</text>
      </view> -->

      <!-- 客服联系方式 -->
      <view class="contact-info">
        <text class="title">客服联系方式</text>
        <view class="info-item">
          <text class="label">微信：</text>
          <text class="value">金圣元 护理管理员铁宗会</text>
        </view>
        <view class="info-item">
          <text class="label">电话：</text>
          <text class="value" @click="copyPhone('18064463749')">18064463749</text>
        </view>
        <!-- <view class="info-item">
          <text class="label">工作时间：</text>
          <text class="value">09:00 - 18:00</text>
        </view> -->
        
                <!-- 二维码部分 -->
                <view class="qrcode-section">
         <image show-menu-by-longpress="{{true}}"
          src="https://cloud-minapp-47896.cloud.ifanrusercontent.com/1u8IFsle0p1k0y0A.png"
          class="qrcode-image"
          mode="aspectFit"
          alt="客服微信二维码"
           />
           

          <text class="qrcode-tip">长按识别二维码添加客服微信</text>
        </view>
      </view>
      <!-- 客服联系方式 -->
      <view class="contact-info">
        
        <view class="info-item">
          <text class="label">微信：</text>
          <text class="value">金圣元护理小杨</text>
        </view>
        <view class="info-item">
          <text class="label">电话：</text>
          <text class="value" @click="copyPhone('18060924226')">18060924226</text>
        </view>
        <!-- <view class="info-item">
          <text class="label">工作时间：</text>
          <text class="value">09:00 - 18:00</text>
        </view>
         -->
                <!-- 二维码部分 -->
                <view class="qrcode-section">
         <image show-menu-by-longpress="{{true}}"
          src="https://cloud-minapp-47896.cloud.ifanrusercontent.com/1u8FTLXq5XhvtQvk.png"
          class="qrcode-image"
          mode="aspectFit"
          alt="客服微信二维码"
           />
           

          <text class="qrcode-tip">长按识别二维码添加客服微信</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const showSuccessMessage = ref(false);

onLoad(() => {
  // 检查是否从支付页面跳转过来
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 2];
  if (prevPage && prevPage.route === 'pages/customer-platform/payment/index') {
    showSuccessMessage.value = true;
  }
});
//返回上一级  

const handleBack = () => {
  uni.navigateBack();
};

const copyPhone = (phoneNumber) => {
  uni.setClipboardData({
    data: phoneNumber,
    success: () => {
      uni.showToast({
        title: '电话已复制',
        icon: 'success'
      });
    }
  });
};
</script>

<style scoped lang="scss">
.container {
  padding: 20rpx;
  background-color: #f9f9f9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 0 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.contact-info {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-top: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
    font-size: 28rpx;

    .label {
      color: #666;
      width: 160rpx;
    }

    .value {
      color: #333;
    }
  }

  .qrcode-section {
    margin-top: 32rpx;
    text-align: center;

    .qrcode-image {
      width: 400rpx;
      height: 600rpx;
      margin: 0 auto;
    }

    .qrcode-tip {
      display: block;
      margin-top: 16rpx;
      font-size: 24rpx;
      color: #666;
    }
  }
}

.success-message {
  padding: 20rpx;
  margin: 20rpx;
  background-color: #e8f5e9;
  border-radius: 8rpx;
  text-align: center;
  color: #2e7d32;
  font-size: 28rpx;
}
</style> 